
<style type="text/css">

    
    .estratetigaContenedor {
        
        margin: 40px 10px 20px 15px;
        
        background: #fff;
        
        
    }
    
    .divFondo{
        background: #dddddd;
        
        
    }
    .estraAgentesTitulo{
        
       margin-right: 20px;
       
    }
    .estraAgentes{
        padding: 10px;
        border:1px solid #a6a6a6;
        margin: 2px;
        
        /*para Firefox*/
        -moz-border-radius: 5px 5px 5px 5px;
        /*para Safari y Chrome*/
        -webkit-border-radius: 5px 5px 5px 5px;
        /* para Opera */
        border-radius: 5px 5px 5px 5px;
        
        box-shadow: 1px 1px 2px #dddddd;
        
        color: #545454;
        font-family: 'Average Sans', sans-serif;
        font-size: 12px;
    }
    
    
    .estraDatos,.estraDatosTitu{
        
        padding: 2px;
        border:1px solid #a6a6a6;
        border-left: none;
        text-align: lef;
        padding-left: 10px;
        
        color: #545454;
        font-family: 'Average Sans', sans-serif;
        font-size: 14px;
        
        
        
    }
    .estraDatosTitu{
        
        
        padding-left: 10px;
        
        
        
    }
    .estraDatosTituText{
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        height: 40px;
    }
    
    .espLeft{
        
        background: #fff;
        float: left;height: 40px;
        width: 5px;
    }
    .flechaLef{
        font-family: 'Average Sans', sans-serif;
        font-size: 12px;
        position:relative;
        background: #C7E0E5;
        border:solid 1px #0cceff;
        border-left: none;
        float: left;
        color: #545454;
        padding: 11px 5px 12px 5px;
 
    }
    
    .busqInt{
        font-family: 'Average Sans', sans-serif;
        font-size: 12px;
        position:relative;
        
        float: left;
        color: #545454;
        padding: 11px 5px 12px 5px;
 
    }
    
    
    .flechaLef:before, .flechaLef:after {
    content: " ";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    
    }
    
    .flechaLeftdiv:before, .flechaLeftdiv:after {
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        top:-1px
    }
    
    .flechaLeftdiv:after {
    border-left: 15px solid #C7E0E5;
    right: -15px;
    z-index: 2;
    }
    .flechaLeftdiv:before {
    border-left: 15px solid #0cceff;
    right: -16px;
    z-index: 1;
    }
    
 
    
    
</style>

<div class="estratetigaContenedor">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        
<?php //Inicio del Armado del esqueleto 


    $countColumnas = 2;
    $atrr          = 'class="estraDatos"';
    $productoFavoritoId = array();
    $productoComprados = 0;
    
  
?> 
        <tr>
            
            
            <td class="estraAgentesTitulo">
                
            </td>
          
            
            <td class="estraAgentesTitulo">
                <div class="estraAgentes">
                <font style="font-size: 14px;">LISTADO DE  LOS PRODUCTOS PREFERIDOS POR EL CLIENTE</font><br>
                
                
                </div>
            </td>
        </tr>
        
        
       <!--PRODUCTOS FAVORITOS DEL CLIENTE  -->
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        <tr>
            <td colspan="<?php echo $countColumnas;?>" class="estraAgentesTitulo divFondo">
            <div class="espLeft"></div>
            <div class="flechaLef flechaLeftdiv">
                ALIMENTO CONSUMIDOS POR EL CLIENTE 
            </div></td>
        </tr>
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        
        <?php foreach ($favoritos as $favorito) {?>
        <tr>
            
            <td <?php echo $atrr;?> style="padding: 5px 5px 5px 15px;" width="30px;">
                <a href="<?php echo url_for('producto/desAprobado')."?usuario_id=".$favorito->getUsuarioId()."&producto_id=".$favorito->getProductoId() ?>" onclick="validarLink(this,'Quitar de los Favorito');return false;">
                <img src="/images/callcenter/encuestaMiniOn.png"/>
                </a>
            </td>
            <td <?php echo $atrr;?> ><?php echo $favorito->getProducto()->getMarca().' | '.$favorito->getProducto(); ?></td>
            
        </tr>
        <?php 
        
        
       $productoFavoritoId[]=$favorito->getProductoId();
       $productoComprados.= ','.$favorito->getProductoId();
        
        } ?>
        <!-- PRODUCTOS FAVORITOS DEL CLIENTE  -->
        
        <!--PRODUCTOS COMPRADOS POR EL CLIENTE  -->
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        <tr>
            <td colspan="<?php echo $countColumnas;?>" class="estraAgentesTitulo divFondo">
            <div class="espLeft"></div>
            <div class="flechaLef flechaLeftdiv">
                PRODUCTOS VENDIDOS AL CLIENTE  
            </div></td>
        </tr>
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        
        <?php foreach ($servicios as $servicio) {
            
            if(!in_array($servicio->getProductoId(), $productoFavoritoId)){
            ?>
        <tr>
            
            <td <?php echo $atrr;?> style="padding: 5px 5px 5px 15px;" width="30px;">
                <a href="<?php echo url_for('producto/aprobado')."?usuario_id=$usuario_id&producto_id=".$servicio->getProductoId() ?>" onclick="validarLink(this,'Confirmar Favorito?');return false;">
                <img src="/images/callcenter/encuestaMini.png"/>
                </a>
            
            </td>
            <td <?php echo $atrr;?> ><?php echo $servicio->getProducto()->getMarca().' | '.$servicio->getProducto(); ?></td>
            
        </tr>
        <?php }
        
        $productoComprados.= ','.$servicio->getProductoId();
        
        } ?>
        <!-- FIN PRODUCTOS COMPRADOS POR EL CLIENTE  -->
        
        
        <!--BUSCAR EN LISTA DE PRODUCTOS  -->
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        <tr>
            <td colspan="<?php echo $countColumnas;?>" class="estraAgentesTitulo divFondo">
            <div class="espLeft"></div>
            <div class="flechaLef flechaLeftdiv">
                BUSCAR EN LISTA DE PRODUCTOS
            </div></td>
        </tr>
        <tr><td colspan="<?php echo $countColumnas;?>" style="height: 5px;"></td></tr>
        
        <tr>
            <td colspan="<?php echo $countColumnas;?>" class="estraAgentesTitulo divFondo">
                <table border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                        <td style="width: 100px;"></td>
                        <td>
                            <div class="busqInt">
                            CATEGORIA    
                            </div>
                        </td>
                        <td>
                            <div class="busqInt">
                            <select id="categoria_id">
                                <optgroup label="Seleccione Tipo Producto">
                                <option value="0">Seleccionar Categoria</option>
                                <?php foreach ($categoria as $categ) {?>
                                <option value="<?php echo $categ->getId(); ?>"><?php echo $categ->getNombre(); ?></option>
                                <?php } ?>
                                </optgroup>
                            </select>
                            </div>
                        </td>
                        
                        <td style="width: 100px;"></td>
                        <td>
                            <div class="busqInt">
                            MARCA    
                            </div>
                        </td>
                        <td>
                            <div class="busqInt">
                            <select onchange="selectServicio();" id="marca_id">
                                <optgroup label="Seleccione Marca">
                                <option value="0">Seleccionar Categoria</option>
                                <?php foreach ($marca as $marc) {?>
                                <option value="<?php echo $marc->getId(); ?>"><?php echo $marc->getNombre(); ?></option>
                                <?php } ?>
                                </optgroup>
                            </select>
                            </div>
                        </td>
                        
                        <td style="width: 100px;"></td>
                        <td>
                            <div class="busqInt">
                            NOMBRE PRODUCTO   
                            </div>
                        </td>
                        <td>
                            <div class="busqInt">
                                <input type="text" onkeyup="selectServicioOn();" style="padding: 5px; border: 1px solid #a6a6a6;" value="" name="nombreProducto" id="nombreProducto"/>
                            </div>
                        </td>
                    </tr>
                </table>
                
            
            </td>
        </tr>
        
        <tr><td colspan="<?php echo $countColumnas;?>" >
                <div id="busqResultado">
                    
                <font style="font-size: 20px; width: 100%; text-align: center;" class="busqInt">
                BUSQUEDA DE PRODUCTOS
                </font>
            
                </div>
            </td>
        </tr>
        
       
        <!-- FIN BUSCAR EN LISTA DE PRODUCTOS  -->
        
    </table>

</div>

<?php 

    
   $productoComprados = urlencode($productoComprados);


?>

<script type="text/javascript">

    
        
function selectServicio(){
    
    
    
    $.ajax({
            url: '<?php echo url_for('producto/productoBusq')?>',
            data: 'usuario_id=<?php echo $usuario_id; ?>&categoria_id='+$('#categoria_id').val()+'&marca_id='+$('#marca_id').val()+'&nombre='+$('#nombreProducto').val()+'&productoComprados=<?php echo $productoComprados;?>',
            dataType: "script",
            type: "POST",
            beforeSend:Loading($("#busqResultado")),
            success: function(theResponse){                
                $("#busqResultado").html(theResponse);
            }});
        
        
}

function selectServicioOn(){

    if($('#nombreProducto').val().length>2){
    selectServicio(); }
 
 
}
        
</script>
        